<template>
  <div class="home">
    <div class="form-box">
      <myForm
        :formData="data.formData"
        :formConfig="formConfig"
        :formColumn="formColumn"
        :formRules="rules"
        ref="FF"
        class="form"
      ></myForm>
    </div>
    <div class="btn">
      <el-button type="primary" @click="submit()">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { getNbaByYear, addNba, upDataNba } from '@/api/nba'
import myForm from '@/components/UnForm/index.vue'
import { column } from './config'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const data = reactive({
  formData: {}
})
const formConfig = reactive({ labelWidth: '120px', ref: 'dom' })
const formColumn = reactive(column)
//添加表单验证
const rules = computed(() => {
  const obj = reactive({})
  formColumn.forEach((item) => {
    if (item.rule) {
      const key = item.fild
      const rule = item.rule
      obj[key] = rule
    }
  })
  return obj
})
const FF = ref(null)
const submit = async () => {
  const res = await FF.value.checkForm()
  if (res) {
    const year = router.currentRoute.value.query.year
    if (year) {
      const res = await upDataNba(data.formData)
      if (res.code == 200) {
        router.go(-1)
      }
    } else {
      const res = await addNba(data.formData)
      if (res.code == 200) {
        router.go(-1)
      }
    }
  }
}
// 根据详情获取数据
const getData = async (id) => {
  const res = await getNbaByYear({ year: id })
  if (res.code === 200) {
    data.formData = res.data
  }
}
onMounted(() => {
  const year = router.currentRoute.value.query.year
  if (year) {
    //编辑 返显
    getData(year)
    formColumn[0].disabled = true
  } else {
  }
})
</script>
<style scoped lang="scss">
.home {
  .form-box {
    padding-right: 30px;
    .form {
      margin-top: 30px;
    }
  }
  .btn {
    text-align: center;
  }
}
</style>
